<template>
  <div>
    <base-list ref="fastSearch"
               :condition="condition"
               :datas.sync="contractData"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="80px">
        <el-row>
          <el-col :span="7" class="search-width4">
            <el-form-item label="合同号">
              <auto-search-partyname searchName="code"
                                     @select="v=>condition['search_LIKE_code']=v"></auto-search-partyname>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="search-width4">
            <el-form-item label="合同名称">
              <auto-search-partyname searchName="name"
                                     @select="v=>condition['search_LIKE_name']=v"></auto-search-partyname>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="search-width4">
            <el-form-item label="账户名称">
              <el-select v-model="condition['search_EQ_cargoOwnerAccountId']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="(item,index) in accountList"
                         :key="index"
                         :label="item.name"
                         :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="search-width4">
            <el-form-item label="客户名称">
              <el-select v-model="condition['search_EQ_partyAId']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="(item,index) in customerList"
                         :key="index"
                         :label="item.name"
                         :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" class="search-width4">
            <el-form-item label="状态">
              <el-select v-model="condition['search_EQ_contractStatus']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictContractStatus"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="width: 390px;">
            <el-form-item label="创建时间">
              <el-date-picker v-model="condition['search_GTE_createDateTime']"
                              value-format="yyyy-MM-dd 00:00:00"
                              type="date"
                              placeholder="选择日期"></el-date-picker>
              <span>~</span>
              <el-date-picker v-model="condition['search_LTE_createDateTime']"
                              value-format="yyyy-MM-dd 23:59:59"
                              type="date"
                              placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                        class="ml-80"
                       @click="loadData">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                :data="contractData"
                border
                stripe
                max-height="550">
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="code"
                         label="合同号"
                         min-width="120"></el-table-column>
        <el-table-column prop="name"
                         label="合同名称"
                         min-width="120"></el-table-column>
        <el-table-column prop="cargoOwnerAccountName"
                         label="账户名称"
                         min-width="200"></el-table-column>
        <el-table-column prop="partyAName"
                         label="客户名称"
                         min-width="200"></el-table-column>
        <el-table-column prop="orgName"
                         label="所属单位"
                         min-width="200"></el-table-column>
        <el-table-column prop="deptName"
                         label="所属仓库"
                         min-width="120"></el-table-column>
        <el-table-column prop="startDate"
                         label="有效期起"
                         min-width="120"></el-table-column>
        <el-table-column prop="endDate"
                         label="有效期止"
                         min-width="120"></el-table-column>
        <el-table-column prop="contractStatusDesc"
                         label="状态"
                         min-width="120"></el-table-column>
        <el-table-column prop="createBy"
                         label="创建人"
                         min-width="200"></el-table-column>
        <el-table-column prop="createDateTime"
                         label="创建时间"
                         min-width="200"></el-table-column>
        <el-table-column prop="auditMan"
                         label="审核人"
                         min-width="120"></el-table-column>
        <el-table-column prop="auditTime"
                         label="审核时间"
                         min-width="200"></el-table-column>
        <el-table-column prop="endMan"
                         label="终止人"
                         min-width="120"></el-table-column>
        <el-table-column prop="endTime"
                         label="终止时间"
                         min-width="180"></el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
                         width="240">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       v-show="scope.row.contractStatus === 'D'||scope.row.contractStatus === 'R'||scope.row.contractStatus === 'C'"
                       @click="handleDialogFormOpen(scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       size="small"
                       v-show="scope.row.contractStatus === 'D'||scope.row.contractStatus === 'R'"
                       @click="handleRemove(scope.row)">删除
            </el-button>
            <el-button size="small"
                       type="text"
                       v-show="scope.row.contractStatus === 'D'"
                       @click="submit(scope.row)">
              提交
            </el-button>
            <el-button size="small"
                       type="text"
                       v-show="scope.row.contractStatus === 'C'"
                       @click="end(scope.row)">
              终止
            </el-button>
            <el-button size="small"
                       type="text"
                       v-show="scope.row.contractStatus === 'C'"
                       @click="delay(scope.row)">
              延期
            </el-button>
            <el-button size="small"
                       type="text"
                       v-show="scope.row.contractStatus === 'C'"
                       @click="delay(scope.row)">
              续签
            </el-button>
            <el-button size="small"
                       type="text"
                       v-show="scope.row.contractStatus === 'A'"
                       @click="handleAuditDialogForm(scope.row)">
              审核
            </el-button>
            <el-button size="small"
                       type="text"
                       @click="handleViewFormOpen(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path:'/goods/business',name:'商务管理工作台'})">返回</el-button>
    </div>
    <add-contract-form ref="addContractForm"
                       @load="loadData"></add-contract-form>
    <edit-contract-form ref="editContractForm"
                        @load="loadData"></edit-contract-form>
    <view-contract-form ref="viewContractForm"
                        @load="loadData"></view-contract-form>
    <audit-contract-form ref="auditContractForm"
                         @load="loadData"
                         @aload="getReason"></audit-contract-form>
    <delay-contract-form ref="delayContractForm"
                        @load="loadData"></delay-contract-form>
  </div>
</template>

<script>
import {
  delContract,
  getContractList,
  viewContract,
  submitContract,
  endContract,
  delayContract
} from '@/api/commerce/contract'
import { getAccountList } from '@/api/commerce/account'
import { getCustomList } from '@/api/commerce/customer'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import autoSearchPartyname from '@/components/autocomplete/autoSearchPartyname'
import addContractForm from './addContractForm'
import editContractForm from './editContractForm'
import viewContractForm from './viewContractForm'
import auditContractForm from './auditContractForm'
import delayContractForm from './delayContractForm'

export default {
  name: 'fastSearch',
  components: {
    addContractForm,
    editContractForm,
    viewContractForm,
    auditContractForm,
    delayContractForm,
    autoSearchOrg,
    autoSearchPartyname
  },
  data() {
    return {
      condition: {}, // 查询条件
      contractData: [], // table数组
      pageSearch: getContractList, // 分页查询api接口
      id: '',
      show: false,
      failedReason: '',
      accountList: [], //账户名称下拉菜单
      customerList:[] // 客户名称下拉菜单
      // partyName: [],
      // cargoOwnerAccountName: []
    }
  },
  mounted() {
    //账户名称下拉菜单
    getAccountList().then(res => {
      this.accountList = res.data.aaData
    })
    //客户名称下拉菜单
    getCustomList().then(res => {
      this.customerList = res.data.aaData
    })
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    loadData() {
      this.$refs.fastSearch.loadData()
    },
    //接受审核不通过的状态和原因
    getReason(bool) {
      this.show = bool
    },
    //编辑
    handleDialogFormOpen(item) {
      //对于已生效状态的合同，只能够对费目相关的数据进行编辑，其余字段不能进行编辑
      if(item.contractStatus === 'C'){
        this.$refs.editContractForm.disabled = true
      } else {
        this.$refs.editContractForm.disabled = false
      }
      this.$refs.editContractForm.form = JSON.parse(JSON.stringify(item))
      this.$refs.editContractForm.getData()
      this.$refs.editContractForm.dialogForm = true
    },
    //查看
    handleViewFormOpen(item) {
      this.$refs.viewContractForm.form = item
      this.$refs.viewContractForm.getData(this.show)
      this.$refs.viewContractForm.dialogForm = true
    },
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delContract(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 提交
    submit(item) {
      this.$confirm('确定提交此合同吗?', '合同提交', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          item.contractStatus = 'A'
          submitContract(item.id).then(res => {
            this.$message({
              type: 'success',
              message: '合同提交成功!'
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          })
        })
    },
    //终止
    end(item) {
      this.$confirm('确认终止此合同吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          endContract(item.id).then(res => {
            item.contractStatus = 'E'
            this.$message({
              type: 'success',
              message: '合同终止成功!'
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消终止'
          })
        })
    },
    //续签合同
    delay(item) {
      this.$refs.delayContractForm.form = JSON.parse(JSON.stringify(item))
      this.$refs.delayContractForm.getData()
      this.$refs.delayContractForm.dialogForm = true
    },
    //审核合同
    handleAuditDialogForm(item) {
      this.$refs.auditContractForm.form = item
      this.$refs.auditContractForm.getData()
      this.$refs.auditContractForm.dialogForm = true
    },
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style scoped>
.el-form-item .el-date-editor {
  width: 130px;
}
</style>
